﻿@page "/sdk/objects/data_source/r/{RecordId}/{PageName?}"

@model WebVella.Erp.Plugins.SDK.Pages.ErpDataSource.DetailsModel
@{
	Layout = "~/Pages/_AppMaster.cshtml";
	ViewData["Title"] = "Data Source details";
	var dataSourceLabel = Model.DataSourceObject.Name;
	var dataSourceType = @Model.DataSourceObject is DatabaseDataSource ? DataSourceType.DATABASE : DataSourceType.CODE;


	var paramDisplayTemplate = "<div class=\"badge go-bkg-indigo-dark go-white mr-2 font-weight-normal\" style=\"font-size:13px;\"><span style=\"opacity:0.5\"></span>{0} <span style=\"opacity:0.5\">??</span> <span class=\"go-cyan\">{1}</span> <span class=\"go-yellow\">({2})</span></div>";
	var paramsHtml = "";
	var paramsAsString = "";
	foreach (var par in Model.DataSourceObject.Parameters)
	{
		paramsHtml += String.Format(paramDisplayTemplate, par.Name, par.Value, par.Type);
		paramsAsString += par.Name.Replace("@", "") + "," + par.Type + "," + par.Value + "\\r\\n";
	}
	var eqlFieldId = new Guid("C6D3791E-7BED-4233-B284-9193F885A263");
	var modalSqlFieldId = new Guid("0605933E-806F-4467-B831-2539A7720E79");
	var modalDataFieldId = new Guid("AF4711C0-DD59-4223-9F11-08A21421CF50");
	var paramsFieldId = new Guid("8D2A7071-9818-47C3-8C3A-0ED579A733C8");
	var emptyString = "";
}

<wv-form name="DeleteDataSourceForm" id="DeleteDataSourceForm" action="/sdk/objects/data_source/r/@Model.DataSourceObject.Id/?op=delete"></wv-form>


<wv-page-header color="#dc3545" area-label="Data Sources" title="@dataSourceLabel" subtitle="Details" icon-class="fa fa-cloud-download-alt"
				return-url="@Model.ReturnUrl">
	<wv-page-header-actions>
		@foreach (var action in Model.HeaderActions)
		{
			@Html.Raw(action)
		}
	</wv-page-header-actions>

</wv-page-header>

@switch (dataSourceType)
{
	case DataSourceType.DATABASE:
		{
			<wv-row class="mt-4">
				<wv-column span="12">
					<wv-icon-card title="Database" class="mb-4" description="SQL Select from the database via the EQL syntax" icon-class="fas fa-fw fa-database" icon-color="Purple"></wv-icon-card>
				</wv-column>
			</wv-row>
		}
		break;
	case DataSourceType.CODE:
		{
			<wv-row class="mt-4">
				<wv-column span="12">
					<wv-icon-card title="Code" class="mb-4" description="A method with attribute <code>[XYZ]</code> that is evaluated and the returned value is used" icon-class="fas fa-fw fa-code" icon-color="Pink"></wv-icon-card>
				</wv-column>
			</wv-row>
		}
		break;

	default:
		break;
}


<wv-form label-mode="Stacked" mode="Display">
	<wv-section>
		<wv-row>
			<wv-column span="6">
				<wv-field-text label-text="Name" value="@Model.DataSourceObject.Name"></wv-field-text>
			</wv-column>
			<wv-column span="6">
				<wv-field-text label-text="Description" value="@Model.DataSourceObject.Description"></wv-field-text>
			</wv-column>
		</wv-row>
		<wv-row>
			<wv-column span="6">
				<wv-field-text label-text="Model" value="@Model.DataSourceObject.ResultModel"></wv-field-text>
			</wv-column>
			<wv-column span="6">
				<wv-field-number label-text="Weight" value="@Model.DataSourceObject.Weight" decimal-digits="0"></wv-field-number>
			</wv-column>
		</wv-row>
		<wv-row>
			<wv-column span="6">
				<wv-field-text label-text="Entity" value="@Model.DataSourceObject.EntityName"></wv-field-text>
			</wv-column>
			<wv-column span="6">
				<wv-field-checkbox label-text="Return Total" value="@Model.DataSourceObject.ReturnTotal"></wv-field-checkbox>
			</wv-column>
		</wv-row>
		@if (dataSourceType == DataSourceType.DATABASE)
		{
			<wv-row>
				<wv-column span="12">
					<wv-field-code field-id="@eqlFieldId" label-text="EQL Input" language="pgsql" value="@Model.Eql" height="300px"></wv-field-code>
				</wv-column>
			</wv-row>
		}
		else
		{
			<wv-row>
				<wv-column span="12">
					<wv-field-text label-text="Full Class" value="@Model.FullClass"></wv-field-text>
				</wv-column>
			</wv-row>
		}
		<wv-row>
			<wv-column span="12">
				<wv-field-plaintext label-text="Parameters" value="@paramsHtml"></wv-field-plaintext>
			</wv-column>
		</wv-row>
		@if (dataSourceType == DataSourceType.DATABASE)
		{
			<wv-row>
				<wv-column span="12">
					@{
						var viewSQLBtn = @"
								<a href=""#"" class=""mr-3"" data-toggle=""modal"" data-target=""#modal-sql-result""><i class=""fa fa-search""></i> SQL Result</a>
								<a href=""#"" class=""test-data-link""  data-target=""#modal-data-result""><i class=""fa fa-search""></i> Sample Data as JSON</a>
							";
					}
					<wv-field-plaintext label-text="Result" value="@viewSQLBtn"></wv-field-plaintext>
				</wv-column>
			</wv-row>
		}
		else
		{
			<wv-row>
				<wv-column span="12">
					@{
						var viewSQLBtn = @"
								<a href=""#"" data-toggle=""modal"" data-target=""#modal-data-result""><i class=""fa fa-search""></i> Sample Data as JSON</a>
							";
					}
					<wv-field-plaintext label-text="Result" value="@viewSQLBtn"></wv-field-plaintext>
				</wv-column>
			</wv-row>
		}

	</wv-section>
</wv-form>

<wv-modal title="SQL Result" id="modal-sql-result" size="Large">
	<wv-modal-body>
		<wv-field-code mode="Display" label-mode="Hidden" language="pgsql" value="@Model.Sql" height="400px"></wv-field-code>
	</wv-modal-body>
	<wv-modal-footer>
		<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
	</wv-modal-footer>
</wv-modal>

<wv-modal title="Sample data Result" id="modal-data-result" size="Large">
	<wv-modal-body>
		<div class="alert alert-warning">This is a sample query using the default parameter values, converted to JSON.</div>
		<wv-field-code field-id="@modalDataFieldId" mode="Display" label-mode="Hidden" language="json" value="@emptyString" height="400px"></wv-field-code>
	</wv-modal-body>
	<wv-modal-footer>
		<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
	</wv-modal-footer>
</wv-modal>


@*@if (!Model.ErpEntity.System)
	{
		<wv-form name="DeleteRecord"></wv-form>
	}*@

<script>
	var modalSqlResultSel = "#modal-sql-result";
	var modalDataResultSel = "#modal-data-result";
	function SuccessCallback(response,resultType) {
		$(modalSqlResultSel).find(".result").addClass("d-none");
		$(modalSqlResultSel).find(".error").addClass("d-none");
		$(modalDataResultSel).find(".result").addClass("d-none");
		$(modalDataResultSel).find(".error").addClass("d-none");

		if (response.errors.length > 0) {
			var errorString = "<div class='alert alert-danger'><ul>";
			for (var i = 0; i < response.errors.length; i++) {
				errorString += "<li>" + response.errors[i].message + "</li>";
			}
			errorString += "</ul></div>";
			if (resultType === "sql") {
				$(modalSqlResultSel).find(".error").html(errorString).removeClass("d-none");
				$(modalSqlResultSel).modal('show');
			}
			else {
				$(modalDataResultSel).find(".error").html(errorString).removeClass("d-none");
				$(modalDataResultSel).modal('show');
			}
		}
		else {
			if (resultType === "sql") {
				var editor = ace.edit("ace-@modalSqlFieldId");
				editor.setValue(response.sql, -1);
				$(modalSqlResultSel).find(".result").removeClass("d-none");
				$(modalSqlResultSel).modal('show');
			}
			else {
				var editor = ace.edit("ace-@modalDataFieldId");
				editor.setValue(response.data, -1);
				$(modalDataResultSel).find(".result").removeClass("d-none");
				$(modalDataResultSel).modal('show');
			}
		}

	}

	$(function () {
		$('.test-data-link').click(function (e) {
			e.preventDefault();
			var thisEl = this;
			var editor = ace.edit("ace-@eqlFieldId");
			var eql = editor.getValue();
			var paramsString = "@paramsAsString";
			var resultType = "sql";
			if (e.target.attributes["data-target"].value === modalDataResultSel) {
				resultType = "data";
			}
			$(thisEl).find(".icon").removeClass("fa-search").addClass("fa-spin fa-spinner");
			var postObject = {
				action:resultType,
				eql:eql,
				parameters:paramsString
			};
			$.ajax({
				type: "POST",
				headers: {
					'Accept': 'application/json',
					'Content-Type': 'application/json'
				},
				url: "/api/v3.0/datasource/test",
				data: JSON.stringify(postObject),
				success: function (response) {
					SuccessCallback(response,resultType);
					$(thisEl).find(".icon").removeClass("fa-spin fa-spinner").addClass("fa-search");
				},
			  dataType: "json"
			});
		})

	});
</script>